<template>
  <div>
    <div class="main">
      <TitleComponent @changeSeacg="getchange"/>
      <div class="content">
        <div class="nav">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>课程搜索</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!--      专题-->
        <div class="subject">
          <div class="title">专题：</div>
          <ul>
            <li v-for="(i,index) in subjectList" :key="index"
                :class="[{'active':i.subjectId.toString()===classSubject}]"
                @click="clciksubject(i.subjectId.toString())">
              {{ i.title }}
            </li>
          </ul>
        </div>
        <!--      类型-->
        <div class="subject">
          <div class="title">类型：</div>
          <ul>
            <li v-for="(i,index) in typeList" :key="index" :class="[{'active':i.type===classtype}]"
                @click="clicktype(i.type)">
              {{ i.value }}
            </li>
          </ul>
        </div>
        <!--      方式-->
        <div class="subject">
          <div class="title">方式：</div>
          <ul>
            <li v-for="(i,index) in wayList" :key="index" :class="[{'active':i.Type===classType}]"
                @click="clickType(i.Type)">
              {{ i.value }}
            </li>
          </ul>
        </div>
      </div>
      <div style="width: 1200px;margin: 20px auto;font-size: 14px;">
        <ClassesSon :classList="classList"/>
      </div>
    </div>
    <Friend/>
  </div>

</template>

<script>
import TitleComponent from "@/views/Index/components/TitleComponent";
import {postprojectList} from "@/api/index-api";
import {getClassseach} from "@/api/seach-api";
import ClassesSon from "@/views/Index/components/ClassesSon";
import Friend from "@/components/Friend";

export default {
  name: "SearchPage",
  data() {
    return {
      subjectList: "",
      flag: false,
      classSubject: "",
      classtype: '',
      classType: '',
      subjectId: '',
      type: '',
      courseType: '',
      classList: "",
      typeList: [
        {
          type: "",
          value: "全部类型"
        },
        {
          type: "free",
          value: "免费课程"
        },
        {
          type: "pay",
          value: "付费课程"
        },
        {
          type: "boutique",
          value: "精品课程"
        },
        {
          type: "discount",
          value: "限时折扣课程"
        }
      ],
      wayList: [
        {
          Type: "",
          value: '全部方式'
        },
        {
          Type: "live",
          value: '直播课程'
        },
        {
          Type: "recorded",
          value: '录播课程'
        },
      ]
    }
  },
  components: {
    TitleComponent,
    ClassesSon,
    Friend
  },
  created() {
    this.classtype = this.$route.query.type
    this.classSubject = this.$route.query.subjectId
    this.classType = this.$route.query.courseType
    console.log(this.$route.query.keyword)


    getClassseach(this.$route.query.keyword, this.$route.query.type, this.$route.query.subjectId, this.$route.query.courseType).then(res => {
      console.log(res)
      this.classList = res.courseList
    })

    postprojectList().then(res => {
      // console.log(res.rows)
      this.subjectList = res.rows
      //在最前面加上
      this.subjectList.unshift({
        title: "全部专题",
        subjectId: ''
      })
    })
  },
  methods: {
    clciksubject(e) {
      this.subjectId = e
      this.classSubject = e
      if (this.$route.query.subjectId !== e.toString()) {
        this.$router.push({
          path: '/SearchPage',
          query: {
            keyword: this.$route.query.keyword,
            subjectId: this.subjectId,
            type: this.type,
            courseType: this.courseType
          }
        })
      }
      getClassseach(this.$route.query.keyword, this.$route.query.type, this.$route.query.subjectId, this.$route.query.courseType).then(res => {
        console.log(res)
        this.classList = res.courseList
      })
    },
    clicktype(e) {
      this.type = e
      this.classtype = e
      console.log(e)
      if (this.$route.query.type !== e.toString()) {
        this.$router.push({
          path: '/SearchPage',
          query: {
            keyword: this.$route.query.keyword,
            subjectId: this.subjectId,
            type: this.type,
            courseType: this.courseType
          }
        })
      }

      getClassseach(this.$route.query.keyword, this.$route.query.type, this.$route.query.subjectId, this.$route.query.courseType).then(res => {
        console.log(res)
        this.classList = res.courseList
      })

    },
    clickType(e) {
      this.courseType = e
      this.classType = e
      if (this.$route.query.courseType !== e.toString()) {
        this.$router.push({
          path: '/SearchPage',
          query: {
            keyword: this.$route.query.keyword,
            subjectId: this.subjectId,
            type: this.type,
            courseType: this.courseType
          }
        })
      }
      getClassseach(this.$route.query.keyword, this.$route.query.type, this.$route.query.subjectId, this.$route.query.courseType).then(res => {
        console.log(res)
        this.classList = res.courseList
      })
    },
    getchange(e) {
      console.log(e)
      this.classList = e
      this.classtype = this.$route.query.type
      this.classSubject = this.$route.query.subjectId
      this.classType = this.$route.query.courseType
    }
  },
}
</script>

<style scoped lang="less">
.active {
  color: white;
  background-color: #00cf8c;
}

.main {
  background-color: #ffffff;

  .content {
    width: 1200px;
    margin: 0 auto;

    .nav {
      margin: 20px 0;
    }

    .subject {
      display: flex;
      background-color: #f4f4f4;
      padding: 10px;
      margin-bottom: 2px;

      .title {
        margin-top: 4px;
        width: 50px;
      }

      ul {
        font-size: 14px;
        width: 1120px;
        margin: 0;

        li {
          float: left;
          margin: 4px 10px;
          padding: 4px 4px;
        }
      }
    }
  }
}

</style>
<style lang="less">
.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
  font-weight: 400;
}

.el-breadcrumb {
  font-size: 16px;
}

</style>